<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%@ include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title>${fn:escapeXml(subject.title)}</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="WangCaixia_gz none"/>
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/0522wap1_1/topic.css">

    </head>

    <body class="g-doc" id="Jlazy_img">
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="8234" />
        </jsp:include>
        <!-- 公共头部 --> 
        <%@include file="../common/intf6007.html" %>
        <!-- 公共头部end -->
        <!-- 公共头部 S -->
		<div class="header-bg" id="header-bg">
		    <a href="javascript:history.back()" class="header-back" title=""></a>
		   <div class="header-title">
			<span class="header-title-nav">导语</span>
		   </div>
	   </div>
        <!-- 公共头部 E -->
        <!-- 大背景图头部 E -->
       <div class="g-bd">
		<div class="m-dy-txt">${subject.introduction}</div>
		  <div class="picsBox">
			<ul class="pics_9">
			   <c:forEach items="${subjectPhotos}" var="subjectPhoto">
				 <li><img width="68" height="68" src="" src2="${subjectPhoto.url134x134}" data-meta="${subjectPhoto.url400x400}" /></li>
			   </c:forEach>
			</ul>
			
	      </div>
	    </div>

         <!-- 公共底部 --> 
         <%@include file="../common/intf5987.html" %>
         <!-- 公共底部end --> 
        <script type="text/javascript" src="http://js.3conline.com/wap/pcauto/common/zepto1.1.6.min.js" ></script>
        
		<script src="http://js.3conline.com/wap/2013/common/js/zepto.min.js" ></script>
		<script src="http://js.3conline.com/wap/common/swipe.extend-min.js"></script>
		<script src="http://js.3conline.com/wap/2013/common/js/lazy.min.js"></script>
		<script>
		var xx = Lazy.create({
		    lazyId: "Jlazy_img",
		    trueSrc: 'src2',
		    offset: 500, //不设置则默认当前浏览器一屏高度
		    delay: 100, //该毫秒时间内触发则延时100毫秒再加载
		    delay_tot: 1000 //超过该毫秒时间触发则直接加载
		});
		Lazy.init(xx);
		
		// 点击查看大图
		$(document).delegate('.picsBox img', 'click', function(e) {
		    var picArray=[], index, col=$(this).closest('.picsBox').find('img');
		    col.each(function() {
		        picArray.push($(this).attr('data-meta'));
		    });
		    index=col.index(this);
		    makeSwipe(picArray, index);
		});
		
		
		function makeSwipe(ary,idx){
		    var HTML='',div, fullPicSlider, sliderEle,
		    _windowHeight = document.documentElement.clientHeight,
		    _scrollTop = document.body.scrollTop;
		
		    idx=idx||0;
		    ary.forEach(function(item,idx){
		        HTML+='<div><img src2="{url}"></div>'.replace('{url}',item);
		    });
		    HTML='<div id="fullPicSlider"><div class="picwrap">'+HTML+'</div><div id="slidenum">123/123</div></div>';
		    div=document.createElement('div');
		    document.body.appendChild(div);
		    div.outerHTML=HTML;
		    sliderEle=document.getElementById('fullPicSlider');
		    sliderEle.addEventListener("touchmove", function(e){
		        if (e.touches.length>1){
		            e.preventDefault();
		        }
		    }, false);
		    fullPicSlider = swipe(sliderEle,{
		        startSlide:idx,
		        callback :render,
		        disableScroll :true
		    });
		    sliderEle.style.top=_scrollTop+'px';
		    sliderEle.onclick=delSwipe;
		
		    window.addEventListener('orientationchange',function(){
		        sliderEle.style.top=document.body.scrollTop+'px';
		    },false);
		
		    window.addEventListener('scroll',function(){
		        sliderEle.style.top=document.body.scrollTop+'px';
		    },false);
		    
		    function render(index, elem){
		        var total=ary.length;
		        document.getElementById('slidenum').innerHTML=(index*1+1)+'/'+total;
		
		        //elem.parentNode.style.height = (elem.clientHeight||elem.offsetHeight) + "px";
		    }
		
		    function delSwipe(){
		        var dom=document.getElementById('fullPicSlider');
		        fullPicSlider.kill();
		        dom.parentNode.removeChild(dom);
		    }
		
		}
		</script>

      
    </body>
</html>
